<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>总结 Vue 数据监测</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>学生信息</h1>

        <button @click="student.age ++">年龄+1岁</button>
        <button @click="addGender">添加性别属性，默认值：男</button>
        <button @click="student.gender = '未知' ">修改性别</button>
        <button @click="addFriend">在列表首位添加一个朋友</button>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为：开车</button>
        <button @click="removeSmoke">过滤掉爱好中的抽烟</button>

        <h3>姓名：{{ student.name }}</h3>
        <h3>年龄：{{ student.age }}</h3>
        <h3 v-if="student.gender">性别：{{ student.gender }}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">{{ h }}</li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">{{ f.name }} - {{ f.age }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                student: {
                    name: 'tom',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [
                        { name: 'jerry', age: 35 },
                        { name: 'tony', age: 36 }
                    ]
                }
            },
            methods: {
                addGender() {
                    this.$set(this.student, 'gender', '男')
                },
                addFriend() {
                    this.student.friends.unshift({ name: 'jack', age: 37 })
                },
                updateFirstFriendName() {
                    this.student.friends[0].name = '张三'
                },
                addHobby() {
                    this.student.hobby.push('篮球')
                },
                updateHobby() {
                    this.student.hobby.splice(0, 1, '开车')
                },
                removeSmoke() {
                    this.student.hobby = this.student.hobby.filter(item => item !== '抽烟')
                }
            }
        })
    </script>
</body>
</html>